<template>
  <div>
    <el-form :model="eventForm" :rules="eventFormRoles" ref="eventForm" label-width="10em">
      <h-box header="活动基本信息">
        <el-form-item label="活动标题" prop="title">
          <el-input v-model="eventForm.title" placeholder="请输入活动标题，最多 16 个字" style="width: 400px;"></el-input>
        </el-form-item>
        <el-form-item label="活动备注" prop="remark">
          <el-input v-model="eventForm.remark" placeholder="请输入活动备注，最多 160 个字" type="textarea" :rows="3" style="width: 400px;"></el-input>
          <div class="hui-color-text-secondary hui-font-size-small">活动备注不对消费者展示，仅供管理员备注用</div>
        </el-form-item>
        <el-form-item label="给用户打标签" prop="userTags">
          <hpro-select-tags :value.sync="eventForm.userTags" style="width: 400px;"></hpro-select-tags>
          <div class="hui-color-text-secondary hui-font-size-small">
            <span>给参加过活动的用户打标签，美味建议商户以标签管理参加过活动的用户。</span>
            <router-link to="/home/user/tags/list" target="_blank">新建标签</router-link>
          </div>
        </el-form-item>
        <el-form-item label="活动时间" prop="_dateRange">
          <h-date-range :value.sync="eventForm._dateRange" :start-time.sync="eventForm.startTime" :end-time.sync="eventForm.endTime" style="width: 400px;"></h-date-range>
        </el-form-item>
      </h-box>
      <h-box header="活动奖励">
        <el-form-item label="奖励类型" prop="type">
          <el-radio-group v-model="eventForm.type" @change="onChangeType">
            <el-radio label="coupon">送优惠券</el-radio>
            <el-radio label="lucky">送红包</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="奖励内容" prop="reward">
          <el-table v-model="eventForm.reward" :data="eventForm.reward" stripe border size="medium" style="width: 400px; line-height: 23px;">
            <el-table-column label="优惠券/红包" prop="title"></el-table-column>
            <el-table-column label="数量" prop="number"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button @click="handleDelete(scope.$index, scope.row)" type="danger" size="mini" plain>删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="hui-color-text-secondary hui-font-size-small">为保证消费者体验，最多添加 5 种优惠券，优惠券总数量不宜超过 10 张</div>
          <el-button v-if="eventForm.type === 'coupon'" @click="handleDialogCoupon" :disabled="eventForm.reward.length >= 5" type="primary" size="mini" icon="el-icon-plus" plain>添加优惠券</el-button>
          <el-button v-if="eventForm.type === 'lucky'" @click="handleDialogCoupon" :disabled="eventForm.reward.length >= 5" type="success" size="mini" icon="el-icon-plus" plain>添加红包</el-button>
        </el-form-item>
      </h-box>
      <h-box header="活动参与限制">
        <el-form-item label="参加用户限制" prop="eventAllUser">
          <el-radio-group v-model="eventForm.eventAllUser" @change="onChangeCanEventUser">
            <el-radio :label="true">所有用户都可参加</el-radio>
            <el-radio :label="false">部分用户可参加</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="可参加用户" prop="canEventUser" v-if="!eventForm.eventAllUser">
          <hpro-checkbox-card :value.sync="eventForm.canEventUser"></hpro-checkbox-card>
        </el-form-item>
        <el-form-item label="参与频次限制" prop="rateLimit">
          <el-radio-group v-model="eventForm.rateLimit">
            <el-radio :label="0">每人仅限 1 次</el-radio>
            <el-radio :label="1">每人每天 1 次</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="消耗积分" prop="minusBonus">
          <el-input-number v-model="eventForm.minusBonus" :min="0" :step="10" size="medium"></el-input-number>
        </el-form-item>
        <el-form-item label="活动转发限制" prop="canShare">
          <el-radio-group v-model="eventForm.canShare" @change="onChangeCanShare">
            <el-radio :label="false">不可以转发</el-radio>
            <el-radio :label="true">可以转发给朋友</el-radio>
          </el-radio-group>
          <div class="hui-color-text-secondary hui-font-size-small">为保证您的微信公众号不被恶意举报，我们的活动页面没有诱导分享和转发的设计元素</div>
        </el-form-item>
        <el-form-item label="分享标题" prop="shareTitle" v-if="eventForm.canShare">
          <el-input v-model="eventForm.shareTitle" placeholder="请输入分享标题，最多 16 个字" style="width: 400px;"></el-input>
        </el-form-item>
        <el-form-item label="分享描述" prop="shareDesc" v-if="eventForm.canShare">
          <el-input v-model="eventForm.shareDesc" placeholder="请输入分享描述，最多 24 个字" style="width: 400px;"></el-input>
        </el-form-item>
      </h-box>
      <h-box>
        <el-form-item label="" slot="footer" class="hui-mb-0">
          <el-button @click="handleSubmit('eventForm')" :loading="loading" type="primary">{{ type === 'edit' ? '保存' : '创建' }}</el-button>
          <el-button @click="handleBack">返回</el-button>
        </el-form-item>
      </h-box>
    </el-form>

    <hpro-dialog-reward :visible.sync="dialogVisibleReward" :value.sync="eventForm.reward" :type="eventForm.type" number-ctrl></hpro-dialog-reward>

  </div>
</template>

<script>
export default {
  data () {
    return {
      type: '',
      loading: false,
      dialogVisibleReward: false,
      eventForm: {
        title: '',
        remark: '',
        userTags: [],
        _dateRange: [],
        startTime: '',
        endTime: '',
        type: 'coupon',
        reward: [],
        eventAllUser: true,
        canEventUser: [],
        rateLimit: 0,
        minusBonus: 0,
        canShare: false,
        shareTitle: '',
        shareDesc: ''
      },
      eventFormRoles: {
        title: [
          {
            required: true,
            message: '请输入活动标题',
            trigger: 'blur, change'
          },
          {
            max: 16,
            message: '活动标题最多 16 个字',
            trigger: 'blur, change'
          }
        ],
        remark: [
          {
            max: 160,
            message: '活动备注最多 160 个字',
            trigger: 'blur, change'
          }
        ],
        userTags: [
          {
            type: 'array',
            max: 5,
            message: '可选标签不超过 5 个',
            trigger: 'blur, change'
          }
        ],
        _dateRange: [
          {
            required: true,
            type: 'array',
            len: 2,
            fields: {
              0: {
                required: true,
                type: 'integer',
                message: '活动时间必填',
                trigger: 'change'
              },
              1: {
                required: true,
                type: 'integer',
                message: '活动时间必填',
                trigger: 'change'
              }
            }
          }
        ],
        type: [
          {
            required: true,
            message: '奖励类型必填',
            trigger: 'change'
          }
        ],
        reward: [
          {
            required: true,
            type: 'array',
            message: '请至少选择 1 个奖励内容',
            trigger: 'change'
          }
        ],
        eventAllUser: [
          {
            required: true,
            type: 'boolean',
            message: '参加用户限制必选',
            trigger: 'change'
          }
        ],
        canEventUser: [
          {
            required: true,
            type: 'array',
            message: '请至少选择 1 个可参与活动的会员卡',
            trigger: 'change'
          }
        ],
        rateLimit: [
          {
            required: true,
            type: 'integer',
            message: '请选择参与频次限制',
            trigger: 'change'
          }
        ],
        minusBonus: [
          {
            required: true,
            type: 'integer',
            min: 0,
            message: '请输入消耗积分, 如不需要消耗积分，请填写 0',
            trigger: 'blur, change'
          }
        ],
        canShare: [
          {
            required: true,
            type: 'boolean',
            message: '请选择是否可以分享',
            trigger: 'change'
          }
        ],
        shareTitle: [
          {
            required: true,
            message: '分享标题必填',
            trigger: 'blur, change'
          },
          {
            max: 16,
            message: '分享标题最多 16 个字',
            trigger: 'blur, change'
          }
        ],
        shareDesc: [
          {
            required: true,
            message: '分享描述必填',
            trigger: 'blur, change'
          },
          {
            max: 24,
            message: '分享描述最多 24 个字',
            trigger: 'blur, change'
          }
        ]
      }
    }
  },
  created () {
    this.setType()
  },
  methods: {
    // 根据url判断类型
    setType () {
      let type = this.$route.query.type
      this.type = type
      if (type === 'edit') {
        this.initMockData()
      }
    },

    // 模拟数据
    initMockData () {
      let eventForm = this.eventForm
      let tmp = {
        title: '抢枪抢',
        remark: '2018年2月29日群发的活动',
        userTags: [
          {
            id: '1',
            label: '标签名称1'
          }
        ],
        _dateRange: [],
        startTime: 1519228800,
        endTime: 1524412799,
        type: 'coupon',
        reward: [
          {
            cardId: '345345345',
            number: 1,
            title: '优惠券标题2'
          },
          {
            cardId: '123123123',
            number: 2,
            title: '优惠券标题1'
          }
        ],
        eventAllUser: true,
        canEventUser: [],
        rateLimit: 0,
        minusBonus: 0,
        canShare: false,
        shareTitle: '',
        shareDesc: ''
      }
      eventForm = tmp
      this.eventForm = eventForm
    },

    // 奖励类型变化事件
    onChangeType () {
      this.eventForm.reward = []
    },

    // 打开红包优惠券选择模态框
    handleDialogCoupon () {
      this.dialogVisibleReward = true
    },

    // 删除已选择的优惠券或红包事件
    handleDelete (index, row) {
      let reward = this.eventForm.reward
      reward.splice(index, 1)
      this.eventForm.reward = reward
    },

    // 设置可参加用户为空
    onChangeCanEventUser () {
      if (this.eventForm.eventAllUser) {
        this.eventForm.canEventUser = []
      }
    },

    // 设置分享标题和文案为空
    onChangeCanShare () {
      if (!this.eventForm.canShare) {
        this.eventForm.shareTitle = ''
        this.eventForm.shareDesc = ''
      }
    },

    // 返回
    handleBack () {
      this.$router.back()
    },

    // 表单校验
    handleSubmit (formName) {
      this.$formSubmit(formName).then(() => {
        console.log('提交！')
        this.$loading()
        this.loading = true
        setTimeout(() => {
          this.$message({
            message: '活动保存成功！',
            type: 'success'
          })
          this.handleBack()
          this.$loading().close()
        }, 1000)
      }).catch(() => {
        console.log('表单校验失败！')
        this.$message({
          message: '必要的活动信息没填写完整, 请检查!',
          type: 'warning'
        })
        this.loading = false
      })
    }
  }
}
</script>
